<template>
  <!--  下单用户信息页面-->
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__good">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item prop="id">
          <el-input v-model="dataForm.id" placeholder="用户ID" clearable></el-input>
        </el-form-item>
<!--        <el-form-item prop="deptId">-->
<!--          <el-input v-model="dataForm.deptId" placeholder="部门ID" clearable></el-input>-->
<!--        </el-form-item>-->
        <el-form-item prop="identity">
          <ren-select v-model="dataForm.identity" dict-type="identity" placeholder="用户身份"></ren-select>
        </el-form-item>
        <el-form-item prop="mobile">
          <el-input v-model="dataForm.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-cascader
              v-model="value"
              :options="options"
              :props="{value:'name',label:'name',children:'children',checkStrictly: true}"
              placeholder="请选择区域"
              filterable
              clearable
              @change="handleChange"
          ></el-cascader>
        </el-form-item>
<!--        <el-form-item prop="parentId">-->
<!--          <el-input v-model="dataForm.parentId" placeholder="请输入推荐人id"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-date-picker-->
<!--              v-model="createDateList"-->
<!--              type="daterange"-->
<!--              placeholder="请选择创建日期"-->
<!--              format="yyyy 年 MM 月 dd 日"-->
<!--              range-separator="至"-->
<!--              start-placeholder="开始创建日期"-->
<!--              end-placeholder="结束创建日期"-->
<!--              value-format="yyyy-MM-dd"-->
<!--              class=""-->
<!--              @change="createCK"-->
<!--          />-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button v-if="$hasPermission('api:tbUser:page')" @click="getDataList()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
          v-loading="dataListLoading"
          :data="dataList"
          stripe highlight-current-row
          @selection-change="dataListSelectionChangeHandle"
          @sort-change="dataListSortChangeHandle"
          style="width: 100%;" ref="multipleTable">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>

        <el-table-column prop="id" label="用户ID" header-align="center" align="center" width="90"></el-table-column>
        <el-table-column prop="parentId" label="推广人员" header-align="center" align="center" width="220">
          <template slot-scope="{}" slot="header">
            <!-- 表头名称 -->
            <span>推广人员</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <i class="el-icon-question" style="font-size:16px;"></i>
              <!-- 悬停提示内容 -->
              <div slot="content">
                <div>点击下方名称查看推广人员详细信息</div>
              </div>
            </el-tooltip>
          </template>
          <template slot-scope="{row}">
            <div class="flex_columns" @click="showUserList(row['parentDTO'])" v-if="row['parentDTO']">
              <div class="flex_rows flex_center">
                <el-avatar size="large" :src="row['parentDTO']['avatar']"></el-avatar>
                <div class="flex_columns" style="margin-left: 10px;">
                  <div class="flex_rows" style="text-decoration: underline;cursor: pointer;">ID:{{row['parentDTO']['id']}}</div>
                  <div class="flex_rows flex_center" style="text-decoration: underline;cursor: pointer;">
                    <div class="ellipsis1" style="max-width: 3em;">
                      {{row['parentDTO']['nickname']}}
                    </div>
                    ({{row['parentDTO']['identity']}})
                  </div>
                </div>
              </div>
            </div>
            <div v-if="!row['parentDTO']">暂无推广人员</div>
          </template>
        </el-table-column>
        <el-table-column prop="avatar" label="用户头像" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <!-- 图片展示 -->
            <el-popover trigger="click" placement="top" popper-class="popper">
              <img v-if="row['avatar']" :src="row['avatar']">
              <el-image v-if="row['avatar']" slot="reference" fit="fill" style="width: 45px;height: 45px;border-radius: 50%;" :src="row['avatar']" >
                <div slot="error">
                  暂无图片
                </div>
              </el-image>
            </el-popover>
          </template>
        </el-table-column>
<!--        <el-table-column prop="username" label="用户名" header-align="center" align="center">-->
<!--          <template slot-scope="{row}">-->
<!--            <el-tooltip  effect="dark" :content="row.nickname" placement="top">-->
<!--              <div class="ellipsis2">{{ row.username }}</div>-->
<!--            </el-tooltip>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="nickname" label="用户昵称" header-align="center" align="center">
          <template slot-scope="{row}">
            <el-tooltip  effect="dark" :content="row.nickname" placement="top">
              <div class="ellipsis1">{{ row.nickname }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" header-align="center" align="center" width="110"></el-table-column>
<!--        <el-table-column prop="ranking" label="排名" header-align="center" align="center" width=""></el-table-column>-->
        <el-table-column prop="identity" label="身份" header-align="center" align="center" width="120">
          <template slot-scope="{row}">
            <div>{{ row.identity}}</div>
          </template>
        </el-table-column>
<!--        <el-table-column prop="deptId" label="公司信息" header-align="center" align="left" width="140">-->
<!--          <template slot-scope="{}" slot="header">-->
<!--            &lt;!&ndash; 表头名称 &ndash;&gt;-->
<!--            <span>公司信息</span>-->
<!--            <el-tooltip class="item" effect="dark" placement="top">-->
<!--              <i class="el-icon-question" style="font-size:16px;"></i>-->
<!--              &lt;!&ndash; 悬停提示内容 &ndash;&gt;-->
<!--              <div slot="content">-->
<!--                <div>点击下方名称查看公司信息</div>-->
<!--              </div>-->
<!--            </el-tooltip>-->
<!--          </template>-->
<!--          <template slot-scope="{row}">-->
<!--            <div size="small" type="info" style="cursor: pointer;" @click="showDepartmentList(row.sysDeptDTO)" v-if="row.sysDeptDTO">{{row.deptId}}<br>-->
<!--              {{row.sysDeptDTO.name}}</div>-->
<!--            <div v-if="!row.sysDeptDTO">{{row.deptId}}</div>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="isManager" label="是否负责人" header-align="center" align="center" width="140">-->
<!--          <template slot-scope="{row}">-->
<!--            <div class="ellipsis2" v-if="row.sysDeptDTO">{{ $getDictLabel("isManager", row.isManager) }}</div>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="availableEdouNum" label="余额" header-align="center" align="center"width="">
          <template slot-scope="{row}">
            <div>{{ formatNumber(row.availableEdouNum)}}</div>
          </template>
        </el-table-column>
<!--        <el-table-column prop="availablePointsNum" label="积分" header-align="center" align="center" width="">-->
<!--          <template slot-scope="{row}">-->
<!--            <div>{{ formatNumber(row.availablePointsNum)}}</div>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="province" label="区域" align="center" width="180">
          <template slot-scope="{row}">
            <div v-if="row.identity==='省级经销商'">{{row.province? row.province:'暂无区域'}}</div>
            <div v-else-if="row.identity==='市级经销商'">{{row.province? row.province+row.city:'暂无区域'}}</div>
            <div v-else>{{row.province? row.province+row.city+row.area:'暂无区域'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="bankNumber" label="收款账号" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <el-tooltip  effect="dark" :content="row.bankNumber" placement="top" v-if="row.bankNumber">
              <div class="ellipsis2">{{ row.bankNumber }}</div>
            </el-tooltip>
            <div v-else>暂无</div>
          </template>
        </el-table-column>
        <el-table-column prop="bankName" label="收款银行" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <el-tooltip  effect="dark" :content="row.bankName" placement="top" v-if="row.bankName">
              <div class="ellipsis2">{{ row.bankName }}</div>
            </el-tooltip>
            <div v-else>暂无</div>
          </template>
        </el-table-column>
        <el-table-column prop="bankUsername" label="收款姓名" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <el-tooltip  effect="dark" :content="row.bankUsername" placement="top" v-if="row.bankUsername">
              <div class="ellipsis2">{{ row.bankUsername }}</div>
            </el-tooltip>
            <div v-else>暂无</div>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建日期" header-align="center" align="center" width="150"></el-table-column>
        <el-table-column label="操作" fixed="right" header-align="center" align="center" width="240">
          <template slot-scope="{row}">
            <div class="flex_row_reverse flex_wrap">
              <el-link @click="getUserOrder(row.id)"
                       type="primary"
                       :underline="false">查看订单</el-link>
              <el-link @click="getUserAddress(row.id)"
                       type="primary"
                       :underline="false" >查看地址</el-link>
              <el-link v-if="$hasPermission('api:tbUser:update')"
                       type="primary"
                       :underline="false"
                       @click="addOrUpdateHandle(row)">修改</el-link>
              <!--            <el-button v-if="$hasPermission('api:tbUser:delete')" size="mini"-->
              <!--                       type="danger"-->
              <!--                       @click="deleteHandle(scope.row.id)">删除-->
              <!--            </el-button>-->
            </div>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @cancellation="$refs.multipleTable.clearSelection()"></add-or-update>
      <!--查看公司信息组件-->
      <com-department-list :visible.sync="showDepartment" :content="content"></com-department-list>
      <!--查看用户信息组件-->
      <com-user-list :visible.sync="showUser" :content="content"></com-user-list>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './tbUserAddOrUpdate.vue'
import UploadShippingInfo from "@/views/modules/service/userOrderUploadShippingInfo.vue";
import {formatNumber} from "@/utils";
import addressData from "@/utils/address-data";

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/api/tbUser/page',
        getDataListIsPage: true,
        deleteURL: '/api/tbUser',
        deleteIsBatch: true
      },
      showViewer: false,
      showUser:false,                   //是否显示用户信息
      showDepartment:false,             //是否显示公司信息
      content:{},                       //用户信息内容
      productList: [],                //商品数据
      createDateList: [],               //创建时间数组
      options:addressData,            //地址列表
      value: [],                      //选中地址
      dataForm: {
        id: '',                       //id
        identity: '',                 //2+1用户身份0用户1会员2合伙人
        availableEdouNum: '',       	//奖励
        availablePointsNum: '',       //积分
        performance: '',              //业绩
        ranking: '',                  //排名
        bankName: '',	                //收款银行
        bankNumber: '',               //收款人账号
        bankUsername: '',             //收款人姓名
        avatar: '',                   //用户头像
        mobile: '',                   //手机号
        nickname: '',                 //昵称
        openid: '',                   //openid
        parentId: '',                 //父级ID
        username: '',                 //用户名
        deptId:'',                    //部门ID
        isManager:'',                 //是否为分公司负责人
        createDateStart: '',          //开始创建时间
        createDateEnd: '',            //结束创建时间
      }
    }
  },
  components: {
    UploadShippingInfo,
    AddOrUpdate
  },
  created() {
    this.getGroup()
  },
  mounted() {
  },
  methods: {
    formatNumber,
    handleChange(e){
      if (e.length!==0){
        this.dataForm.province = e[0]
        this.dataForm.city = e[1]
        this.dataForm.area = e[2]
      }
      this.getDataList(this.page)
    },
    // 新增 / 修改
    addOrUpdateHandle (item) {
      if (item){
        this.$refs.multipleTable.toggleRowSelection(item);
      }
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = item.id
        this.$refs.addOrUpdate.init()
      })
    },
    // 获取所有商品信息
    getGroup() {
      this.$http.get(`/api/tbUser/page`).then(({data: res}) => {
        //console.log(res)
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.productList = res.data.list
      }).catch(() => {
      })
    },
    /*创建时间选择*/
    createCK() {
      if (!this.createDateList){
        this.dataForm.createDateStart = ''
        this.dataForm.createDateEnd = ''
        return
      }
      this.dataForm.createDateStart = this.createDateList[0]
      this.dataForm.createDateEnd = this.createDateList[1]
    },
    /*查看地址*/
    getUserAddress(id){
      this.$router.push({path: `/service-userAddress`,query:{userId:id,time:new Date().getTime()}})
    },
    /*查看订单*/
    getUserOrder(id){
      this.$router.push({path: `/service-userOrder`,query:{userId:id,time:new Date().getTime()}})
    },
    //显示公司信息
    showDepartmentList(content){
      this.showDepartment=true;
      this.content= content;
    },
    //显示用户信息
    showUserList(content){
      this.showUser=true;
      this.content= content;
    },
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-image__inner {
  //height: 50px;
}

img {
  height: 400px;
}
.el-button{
  margin-bottom: 10px;
  margin-left: 10px;
}

</style>
